import React, {useState} from "react";
import "../../../css/input_capture.css"
import axios from 'axios'
import { ExclamationCircleOutlined } from '@ant-design/icons';
import { Button, Modal, Space } from 'antd';
const InputCaptureTraditional = ()=>{

    //inputData保存输入框的数据
    const [inputData,setInputData] = React.useState({
        clientName:'username',
        ticker:'stock ticker',
        ric:'ric code',
        size:0,
        price:0,
        currency:'currency',
        issueSector:'issue sector',
        salesPerson:'salesperson',
        ht_pt:'',
        clientSide:'',
    }
    )

    //保存输入框数据到state
    function saveInputData(dataType){
        return (event)=>{
            setInputData({
                ...inputData,
                [dataType]:event.target.value
            })
        }
    }


    const [open, setOpen] = useState(false);
    const [confirmLoading, setConfirmLoading] = useState(false);
  
    function showModal(tradeWay){
        return()=> {
            // 保存ClientSide为Buy/Sell
            setInputData({
                ...inputData,
                clientSide:tradeWay
            })
            setOpen(true);
        }
    };
  
    const handleOk = () => {
        console.log('clicked ok button');
        setInputData(
            {
                clientName:'',
                ticker:'',
                ric:null,
                size:null,
                price:'',
                currency:'',
                issueSector:'',
                salesPerson:'',
                ht_pt:'ht',
                clientSide:null,
            }
        )
        axios({
            method:'post',
            url:'http://localhost:5052/api/trade/trade/createTrade',
            data:{
                tradeClientName:inputData.clientName,
                ticker:inputData.ticker,
                ric:inputData.ric,
                size:inputData.size,
                price:inputData.price,
                tradeCurrency:inputData.currency,
                issuerSector:inputData.issueSector,
                tradeHtPt:inputData.ht_pt,
                tradeType:inputData.clientSide,
                tradeSalesPerson:inputData.salesPerson,
            },
            headers: {'Content-Type':'application/json'}
        }).then(res=>{
            saveInputData({
                clientName:'',
                ticker:'',
                ric:'',
                size:'',
                price:'',
                currency:'',
                issueSector:'',
                salesPerson:'',
                ht_pt:'',
                clientSide:'',
            })
            console.log("请求成功",res.data)
            setConfirmLoading(true);
            setTimeout(() => {
                setOpen(false);
                setConfirmLoading(false);
            }, 500);
        }).catch(err=>{
            setOpen(false);
            console.log("请求失败",err);
        })
    }

    const handleCancel = () => {
        console.log('clicked cancel button');
        setOpen(false);
      };

    return(
        <div id="capture-div">
            <div className="capture-wrapper">
                <div className="capture-filling">
                    <div className="capture-item">
                        <div className="capture-label">Client Name</div>
                        <input className="capture-input" type="text" value={inputData.clientName} onChange={saveInputData('clientName') } />
                    </div>
                    <div className="capture-item">
                        <div className="capture-label">Ticker</div>
                        <input className="capture-input" type="text" value={inputData.ticker} onChange={saveInputData('ticker')} />
                    </div>
                    <div className="capture-item">
                        <div className="capture-label">RIC</div>
                        <input className="capture-input" type="text" value={inputData.ric} onChange={saveInputData('ric')} />
                    </div>
                    <div className="capture-item">
                        <div className="capture-label">Size</div>
                        <input className="capture-input" type="text" value={inputData.size} onChange={saveInputData('size')} />
                    </div>
                    <div className="capture-item">
                        <div className="capture-label">Price</div>
                        <input className="capture-input" type="text" value={inputData.price} onChange={saveInputData('price')} />
                    </div>
                    <div className="capture-item">
                        <div className="capture-label">Currency</div>
                        <input className="capture-input" type="text" value={inputData.currency} onChange={saveInputData('currency')} />
                    </div>
                    <div className="capture-item">
                        <div className="capture-label">Issue Sector</div>
                        <input className="capture-input" type="text" value={inputData.issueSector} onChange={saveInputData('issueSector')} />
                    </div>
                    <div className="capture-item">
                        <div className="capture-label">Salesperson</div>
                        <input className="capture-input" type="text" value={inputData.salesPerson} onChange={saveInputData('salesPerson')} />
                    </div>
                    <div className="capture-item">
                        <div className="capture-label">HT/PT</div>
                        <select className="capture-input" value={inputData.htpt} onChange={saveInputData('htpt')}>
                            <option value="HT">HT</option>
                            <option value="PT">PT</option>
                        </select>
                    </div>
                </div>

                <Button type="primary" onClick={showModal('buy')} id="button-buy">Buy</Button>
                <Button type="primary" onClick={showModal('sale')} id="button-sale">Sell</Button>
                <Modal
                    title=" "
                    open={open}
                    onOk={handleOk}
                    confirmLoading={confirmLoading}
                    onCancel={handleCancel}
                >
                    <h3>client name:{inputData.clientName}</h3>
                    <div></div>
                </Modal>
            </div>
        </div>
    );
}

export default InputCaptureTraditional